<template>
	<view class="earn_box">
		<view class="earn_card">
			<view class="card_top">
				<view class="top_title">积分任务</view>
				<view class="top_span">做任务赚积分</view>
			</view>
			<view class="card_bottom" v-for="(item,index) in score">
				<view class="bottom_name">{{item.name}}</view>
				<view class="bottom_score">{{item.score}}分</view>
				<view class="bottom_span">{{item.span}}</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			score: {
				type: Array,
				default: []
			},

		},
	};
</script>
<style scoped lang="scss">
	.earn_box {
		padding: 32rpx 24rpx  0 24rpx;
		.earn_card {
			font-size: 28rpx;
			line-height: 28rpx;
			background-color: #fff;
			border-radius: 16rpx;
			.card_top {
				display: flex;
				justify-content: space-between;
				padding: 32rpx 0 48rpx 32rpx;
				.top_title {
					font-size: 36rpx;
					font-weight: 600;
					color: #333;
				}
				.top_span {
					padding-right: 32rpx;
					font-size: 24rpx;
					color: #999;
					line-height: 24rpx;
				}
			}
			.card_bottom {
				padding: 0 0 48rpx 32rpx;
				.bottom_name {
					font-weight: 600;
					color: #333;
					display: inline-block;
				}

				.bottom_span {
					font-size: 24rpx;
					color: #ff5445;
					line-height: 24rpx;
					padding-top: 16rpx;
					
				}

				.bottom_score {
					display: inline-block;
					font-weight: 600;
					color: #ff5445;
					text-align: right;
					float: right;
					padding: 10rpx 32rpx 0 0;
				}
			}
		}

	}
</style>
